<template>
  <UserLayout :active-index="activeIndex" :active-menu="activeMenu">
    <div class="tenant-dashboard-content">
      <h1 class="page-title">租客仪表板</h1>
          <!-- 欢迎横幅 -->
          <div class="welcome-banner">
            <h2>欢迎回来，张三！</h2>
            <p>今天是寻找理想住所的好日子</p>
          </div>

          <!-- 统计卡片 -->
          <div class="stats-cards">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="stat-card">
                  <div class="stat-icon bg-blue">
                    <House />
                  </div>
                  <div class="stat-info">
                    <h3>12</h3>
                    <p>收藏房源</p>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-card">
                  <div class="stat-icon bg-green">
                    <Document />
                  </div>
                  <div class="stat-info">
                    <h3>5</h3>
                    <p>申请记录</p>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-card">
                  <div class="stat-icon bg-orange">
                    <ChatLineSquare />
                  </div>
                  <div class="stat-info">
                    <h3>3</h3>
                    <p>未读消息</p>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-card">
                  <div class="stat-icon bg-purple">
                    <Star />
                  </div>
                  <div class="stat-info">
                    <h3>8</h3>
                    <p>浏览记录</p>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>

          <!-- 推荐房源 -->
          <div class="section">
            <div class="section-header">
              <h3>为您推荐</h3>
              <el-link type="primary">查看更多</el-link>
            </div>
            <div class="recommended-properties">
              <el-row :gutter="20">
                <el-col :span="8" v-for="property in recommendedProperties" :key="property.id">
                  <div class="property-card">
                    <div class="property-image">
                      <img :src="property.image" :alt="property.title">
                      <div class="property-price">¥{{ property.price }}/月</div>
                    </div>
                    <div class="property-info">
                      <h4>{{ property.title }}</h4>
                      <p class="property-address">{{ property.address }}</p>
                      <div class="property-features">
                        <span>{{ property.bedrooms }}室{{ property.bathrooms }}卫</span>
                        <span>{{ property.area }}㎡</span>
                        <span>{{ property.type }}</span>
                      </div>
                      <div class="property-actions">
                        <el-button size="small" type="primary" @click="viewProperty(property.id)">查看详情</el-button>
                        <el-button size="small" @click="addToFavorites(property.id)">收藏</el-button>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>

          <!-- 最近浏览 -->
          <div class="section">
            <div class="section-header">
              <h3>最近浏览</h3>
              <el-link type="primary">查看更多</el-link>
            </div>
            <div class="recent-properties">
              <el-row :gutter="20">
                <el-col :span="8" v-for="property in recentProperties" :key="property.id">
                  <div class="property-card">
                    <div class="property-image">
                      <img :src="property.image" :alt="property.title">
                      <div class="property-price">¥{{ property.price }}/月</div>
                    </div>
                    <div class="property-info">
                      <h4>{{ property.title }}</h4>
                      <p class="property-address">{{ property.address }}</p>
                      <div class="property-features">
                        <span>{{ property.bedrooms }}室{{ property.bathrooms }}卫</span>
                        <span>{{ property.area }}㎡</span>
                        <span>{{ property.type }}</span>
                      </div>
                      <div class="property-actions">
                        <el-button size="small" type="primary" @click="viewProperty(property.id)">查看详情</el-button>
                        <el-button size="small" @click="addToFavorites(property.id)">收藏</el-button>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
  </UserLayout>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import UserLayout from '@/components/layout/UserLayout.vue'
import {
  House,
  Star,
  Document,
  ChatLineSquare
} from '@element-plus/icons-vue'

const router = useRouter()
const activeMenu = ref('dashboard')
const pageTitle = ref('首页')

// 推荐房源数据
const recommendedProperties = reactive([
  {
    id: 1,
    title: '精致一居室公寓',
    address: '北京市朝阳区CBD',
    price: 4500,
    bedrooms: 1,
    bathrooms: 1,
    area: 60,
    type: '公寓',
    image: 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1769&q=80'
  },
  {
    id: 2,
    title: '豪华两居室',
    address: '上海市浦东新区',
    price: 8500,
    bedrooms: 2,
    bathrooms: 2,
    area: 90,
    type: '公寓',
    image: 'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80'
  },
  {
    id: 3,
    title: '舒适三居室别墅',
    address: '广州市天河区',
    price: 15000,
    bedrooms: 3,
    bathrooms: 2,
    area: 150,
    type: '别墅',
    image: 'https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80'
  }
])

// 最近浏览房源数据
const recentProperties = reactive([
  {
    id: 4,
    title: '现代化loft公寓',
    address: '深圳市南山区',
    price: 6500,
    bedrooms: 1,
    bathrooms: 1,
    area: 75,
    type: '公寓',
    image: 'https://images.unsplash.com/photo-1575517114892-6a0eb8c4fd5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80'
  },
  {
    id: 5,
    title: '精品复式公寓',
    address: '杭州市西湖区',
    price: 7200,
    bedrooms: 2,
    bathrooms: 1,
    area: 85,
    type: '公寓',
    image: 'https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1753&q=80'
  },
  {
    id: 6,
    title: '温馨单间出租',
    address: '成都市锦江区',
    price: 2800,
    bedrooms: 1,
    bathrooms: 1,
    area: 35,
    type: '单间',
    image: 'https://images.unsplash.com/photo-1584622650111-993a426fbf0a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80'
  }
])

// 处理菜单选择
const handleMenuSelect = (index) => {
  activeMenu.value = index
  switch (index) {
    case 'dashboard':
      pageTitle.value = '首页'
      break
    case 'search':
      pageTitle.value = '房源搜索'
      break
    case 'favorites':
      pageTitle.value = '我的收藏'
      break
    case 'applications':
      pageTitle.value = '申请记录'
      break
    case 'messages':
      pageTitle.value = '消息中心'
      break
    case 'profile':
      pageTitle.value = '个人资料'
      break
    case 'settings':
      pageTitle.value = '设置'
      break
  }
}

// 查看房源详情
const viewProperty = (id) => {
  ElMessage.info(`查看房源 ${id} 的详情`)
  // 实际应用中会跳转到房源详情页
}

// 添加到收藏
const addToFavorites = (id) => {
  ElMessage.success('已添加到收藏')
  // 实际应用中会调用API添加到收藏
}

// 退出登录
const handleLogout = () => {
  ElMessage.success('退出登录成功')
  router.push('/login')
}
</script>

<style scoped>
.tenant-dashboard {
  display: flex;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
}

.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

/* 精美的动态背景 */
.dynamic-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #1a2980, #26d0ce);
  overflow: hidden;
}

/* 建筑物 */
.building {
  position: absolute;
  bottom: 0;
  background: rgba(30, 30, 50, 0.8);
  border-radius: 5px 5px 0 0;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);
}

.building-1 {
  left: 10%;
  width: 80px;
  height: 300px;
  animation: buildingGlow 4s infinite alternate;
}

.building-2 {
  left: 25%;
  width: 120px;
  height: 400px;
  animation: buildingGlow 5s infinite alternate-reverse;
}

.building-3 {
  left: 45%;
  width: 100px;
  height: 350px;
  animation: buildingGlow 6s infinite alternate;
}

.building-4 {
  left: 65%;
  width: 140px;
  height: 450px;
  animation: buildingGlow 4.5s infinite alternate-reverse;
}

.building-5 {
  left: 80%;
  width: 90px;
  height: 320px;
  animation: buildingGlow 5.5s infinite alternate;
}

@keyframes buildingGlow {
  0% {
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);
  }
  100% {
    box-shadow: 0 -5px 25px rgba(100, 200, 255, 0.6);
  }
}

/* 云朵 */
.cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  filter: blur(2px);
}

.cloud-1 {
  top: 20%;
  left: 5%;
  width: 80px;
  height: 30px;
  animation: cloudMove 25s linear infinite;
}

.cloud-2 {
  top: 35%;
  left: 70%;
  width: 120px;
  height: 40px;
  animation: cloudMove 30s linear infinite;
}

.cloud-3 {
  top: 15%;
  left: 40%;
  width: 100px;
  height: 35px;
  animation: cloudMove 35s linear infinite;
}

@keyframes cloudMove {
  0% {
    transform: translateX(-100px);
  }
  100% {
    transform: translateX(calc(100vw + 100px));
  }
}

/* 太阳 */
.sun {
  position: absolute;
  top: 80px;
  right: 100px;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #ffeb3b, #ffc107);
  border-radius: 50%;
  box-shadow: 0 0 40px #ff9800, 0 0 80px #ff5722;
  animation: sunPulse 3s infinite alternate;
}

@keyframes sunPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 40px #ff9800, 0 0 80px #ff5722;
  }
  100% {
    transform: scale(1.1);
    box-shadow: 0 0 60px #ff9800, 0 0 100px #ff5722;
  }
}

/* 光线 */
.light-ray {
  position: absolute;
  top: 120px;
  right: 140px;
  width: 400px;
  height: 200px;
  background: linear-gradient(to right, transparent, rgba(255, 235, 59, 0.2), transparent);
  transform-origin: left center;
  animation: rayRotate 10s infinite linear;
}

.ray-1 {
  transform: rotate(0deg);
  animation-delay: 0s;
}

.ray-2 {
  transform: rotate(60deg);
  animation-delay: 2s;
}

.ray-3 {
  transform: rotate(120deg);
  animation-delay: 4s;
}

@keyframes rayRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 浮动装饰元素 */
.floating-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 15s infinite linear;
}

.shape-1 {
  width: 300px;
  height: 300px;
  top: -100px;
  left: -100px;
  animation-duration: 20s;
  background: radial-gradient(circle, rgba(74, 144, 226, 0.2) 0%, transparent 70%);
}

.shape-2 {
  width: 200px;
  height: 200px;
  bottom: -80px;
  right: -80px;
  animation-duration: 25s;
  animation-direction: reverse;
  background: radial-gradient(circle, rgba(255, 107, 107, 0.2) 0%, transparent 70%);
}

.shape-3 {
  width: 150px;
  height: 150px;
  top: 30%;
  right: 20%;
  animation-duration: 15s;
  background: radial-gradient(circle, rgba(80, 227, 194, 0.2) 0%, transparent 70%);
}

.shape-4 {
  width: 100px;
  height: 100px;
  bottom: 20%;
  left: 20%;
  animation-duration: 18s;
  animation-direction: reverse;
  background: radial-gradient(circle, rgba(255, 209, 102, 0.2) 0%, transparent 70%);
}

.shape-5 {
  width: 250px;
  height: 250px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-duration: 22s;
  background: radial-gradient(circle, rgba(155, 89, 182, 0.2) 0%, transparent 70%);
}

.shape-6 {
  width: 180px;
  height: 180px;
  top: 70%;
  left: 10%;
  animation-duration: 28s;
  background: radial-gradient(circle, rgba(231, 76, 60, 0.2) 0%, transparent 70%);
}

@keyframes float {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(20px, 20px) rotate(90deg);
  }
  50% {
    transform: translate(0, 40px) rotate(180deg);
  }
  75% {
    transform: translate(-20px, 20px) rotate(270deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}

.dashboard-wrapper {
  display: flex;
  width: 100%;
  height: 100vh;
  z-index: 1;
}

/* 侧边栏 */
.sidebar {
  width: 250px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-shadow: 3px 0 10px rgba(0, 0, 0, 0.2);
}

.logo-section {
  text-align: center;
  margin-bottom: 30px;
  padding: 0 20px;
}

.main-logo {
  width: 80px;
  height: 80px;
  margin: 0 auto 15px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.logo-svg {
  width: 100%;
  height: 100%;
}

.app-title {
  color: white;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.nav-menu {
  flex: 1;
  overflow-y: auto;
}

.el-menu-vertical {
  border: none !important;
}

.el-menu-item {
  margin: 5px 10px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.logout-section {
  padding: 0 20px;
}

.logout-btn {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  transition: all 0.3s ease;
}

.logout-btn:hover {
  background: rgba(255, 0, 0, 0.3);
  transform: translateY(-2px);
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(245, 247, 250, 0.9);
  backdrop-filter: blur(10px);
  overflow-y: auto;
}

/* 顶部导航栏 */
.top-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.page-title {
  color: #2c3e50;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.username {
  font-size: 16px;
  font-weight: 500;
  color: #2c3e50;
}

/* 内容区域 */
.content-area {
  padding: 30px;
  flex: 1;
  overflow-y: auto;
}

/* 欢迎横幅 */
.welcome-banner {
  background: linear-gradient(135deg, #4A90E2 0%, #50E3C2 100%);
  border-radius: 15px;
  padding: 30px;
  color: white;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.8s ease-out;
}

.welcome-banner h2 {
  font-size: 28px;
  margin: 0 0 10px;
  font-weight: 700;
}

.welcome-banner p {
  font-size: 18px;
  margin: 0;
  opacity: 0.9;
}

/* 统计卡片 */
.stats-cards {
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  height: 100px;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: white;
  font-size: 24px;
}

.bg-blue {
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
}

.bg-green {
  background: linear-gradient(135deg, #50E3C2 0%, #2DCCA7 100%);
}

.bg-orange {
  background: linear-gradient(135deg, #FFA500 0%, #FF8C00 100%);
}

.bg-purple {
  background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%);
}

.stat-info h3 {
  margin: 0 0 5px;
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
}

.stat-info p {
  margin: 0;
  font-size: 14px;
  color: #7f8c8d;
}

/* 区块 */
.section {
  margin-bottom: 40px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #2c3e50;
}

/* 房源卡片 */
.property-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.property-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.property-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.property-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.property-card:hover .property-image img {
  transform: scale(1.05);
}

.property-price {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(74, 144, 226, 0.9);
  color: white;
  padding: 5px 10px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 14px;
}

.property-info {
  padding: 20px;
}

.property-info h4 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
}

.property-address {
  margin: 0 0 15px;
  font-size: 14px;
  color: #7f8c8d;
}

.property-features {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #7f8c8d;
}

.property-actions {
  display: flex;
  gap: 10px;
}

.property-actions .el-button {
  flex: 1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .sidebar {
    width: 80px;
  }

  .app-title,
  .logo-section p,
  .el-menu-item span,
  .logout-btn span {
    display: none;
  }

  .logo-section {
    padding: 0 10px;
  }

  .main-logo {
    width: 60px;
    height: 60px;
  }

  .logout-btn {
    padding: 10px;
  }

  .el-menu-item {
    justify-content: center;
    padding: 0 10px;
  }
}

@media (max-width: 992px) {
  .stats-cards .el-col {
    width: 50%;
    margin-bottom: 20px;
  }

  .recommended-properties .el-col,
  .recent-properties .el-col {
    width: 100%;
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .stats-cards .el-col {
    width: 100%;
    margin-bottom: 20px;
  }

  .top-navbar {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .content-area {
    padding: 20px 15px;
  }
}
</style>
